<template>
    <div style="width: 100%;" v-loading="pageLoading">
        <div class="invitation-container">
            <el-card class="invitation-card">
                <template #header>
                    <div class="header-title">邀请链接管理</div>
                </template>

                <div class="invitation-content">
                    <el-form :model="invitationForm" label-width="100px">
                        <el-form-item label="邀请码">
                            <el-input v-model="invitationForm.code" placeholder="请输入邀请码" readonly clearable></el-input>
                        </el-form-item>

                        <el-form-item label="邀请链接">
                            <el-input v-model="invitationUrl" readonly clearable suffix-icon="el-icon-link">
                                <template #append>
                                    <el-button :loading="copyLoading" @click="copyInvitationUrl">
                                        复制链接
                                    </el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>

            <el-card class="invitation-stats-card">
                <template #header>
                    <div class="header-title">邀请统计</div>
                </template>

                <div class="stats-container">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-card class="stats-card">
                                <div class="stats-title">总点击量</div>
                                <div class="stats-value">{{ stats.click_count || 0 }}</div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="stats-card">
                                <div class="stats-title">注册用户</div>
                                <div class="stats-value">{{ stats.registeredUsers }}</div>
                            </el-card>
                        </el-col>
                        <el-col :span="8">
                            <el-card class="stats-card">
                                <div class="stats-title">转化率</div>
                                <div class="stats-value">{{ stats.conversionRate }}%</div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

import { statisticsApi } from '/@/api/statistics/index';
import { ElMessage } from 'element-plus'
import { useUserInfo } from '/@/stores/userInfo';
import { storeToRefs } from 'pinia';
const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
const invitationForm = ref({
    code: '',
})
const invitationUrl = ref('')
const copyLoading = ref(false)
const pageLoading = ref(false)
// 统计数据
const stats = ref({
    totalClicks: 0,
    registeredUsers: 0,
    conversionRate: 0,
})

// 生成随机邀请码
const generateCode = () => {
    invitationForm.value.code = userInfos.value.inviter_code || ''
    // invitationUrl.value = `${baseUrl}${invitationForm.value.code}`
    generateQrcode()
    fetchStats()
}

// 生成二维码
const generateQrcode = () => {
    if (!invitationUrl.value) return
}

// 复制邀请链接
const copyInvitationUrl = async () => {
    copyLoading.value = true

    try {
        await navigator.clipboard.writeText(invitationUrl.value)
        ElMessage.success('邀请链接已复制到剪贴板')
    } catch (error) {
        const textarea = document.createElement('textarea')
        textarea.value = invitationUrl.value
        textarea.style.position = 'fixed'
        textarea.style.opacity = '0'
        document.body.appendChild(textarea)
        textarea.select()
        document.execCommand('copy')
        document.body.removeChild(textarea)

        ElMessage.success('邀请链接已复制到剪贴板')
    } finally {
        copyLoading.value = false
    }
}
const fetchStats = async () => {
    pageLoading.value = true
    try {
        let res = await statisticsApi().admin_user_count()
        if (res.code == 0) {
            stats.value = {
                totalClicks: res.data.click_count,
                registeredUsers: res.data.user_count,
                conversionRate: res.data.user_count ? (res.data.user_count / res.data.click_count * 100).toFixed(2) : 0,
            }
            invitationUrl.value = res.data.inviter_link
        }
    } catch (error) { }
    pageLoading.value = false
}
onMounted(() => {
    generateCode()
})
</script>

<style scoped>
:deep(.el-card) {
    border-radius: 20px;
}

.invitation-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.invitation-card,
.invitation-stats-card {
    margin-bottom: 20px;
}

.header-title {
    font-size: 18px;
    font-weight: 600;
}

.invitation-content {
    padding: 20px;
}

.qrcode-container {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.qrcode-img {
    max-width: 200px;
    height: auto;
    border: 1px solid #ebeef5;
    border-radius: 4px;
}

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.stats-container {
    padding: 20px;
}

.stats-card {
    text-align: center;
    padding: 15px;
}

.stats-title {
    font-size: 14px;
    color: #909399;
    margin-bottom: 10px;
}

.stats-value {
    font-size: 24px;
    font-weight: 600;
    color: #303133;
}
</style>